
<template>
  <div class="container">
    <div class="title">
      告警类型排行
    </div>

    <!-- <div class="div_box">
      <div>
        <div>
          <span>低电压</span>
          <span>{{count1?count1:0}}</span>
        </div>
        <div class="lvse">
          <span>设备被拆除告警</span>
          <span>{{count2?count2:0}}</span>
        </div>
        <div class="chengse">
          <span>门被打开</span>
          <span>{{count3?count3:0}}</span>
        </div>
        <div class="honse">
          <span>检测到活动</span>
          <span>{{count4?count4:0}}</span>
        </div>
        <div>
          <span>烟雾浓度过高告警</span>
          <span>{{count5?count5:0}}</span>
        </div>
        <div class="lanse">
          <span>烟雾传感器故障</span>
          <span>{{count7?count7:0}}</span>
        </div>
      </div>
      <div>
        <div>
          <span>温度传感器故障</span>
          <span>{{count8?count8:0}}</span>
        </div>
        <div class="lvse">
          <span>拆除故障</span>
          <span>{{count9?count9:0}}</span>
        </div>
        <div class="chengse">
          <span>温度过高告警</span>
          <span>{{count10?count10:0}}</span>
        </div>
        <div class="honse">
          <span>低浓度报警</span>
          <span>{{count11?count11:0}}</span>
        </div>
        <div>
          <span>高浓度报警</span>
          <span>{{count12?count12:0}}</span>
        </div>
        <div class="lanse">
          <span>故障</span>
          <span>{{count6?count6:0}}</span>
        </div>
      </div>
    </div> -->

    <div class="div_box"  v-show="arr.length > 0">
      <div >
        <div  v-for="(item,index) in arr " :key="index" v-if="index<6">
          <div class="div1">
            <span> {{index+1}}</span>
            {{ item.alarmType | alarmTypeText }}
        </div>
        <div style="color: #D1BA13;">
          {{ item.count }}
        </div>
        </div>

        <div  v-for="(item,index) in arr " :key="index" v-if="index==12">
          <div class="div1">
            <span> {{index+1}}</span>
            {{ item.alarmType | alarmTypeText }}
        </div>
        <div style="color: #D1BA13;">
          {{ item.count }}
        </div>
        </div>

      </div>

      <div style="margin-left: 2px;">
        <div  v-for="(item,index) in arr " :key="index" v-if="index>=6 && index<=11">
          <div class="div2">
            <span> {{index+1}}</span>
            {{ item.alarmType | alarmTypeText }}
        </div>
        <div style="color: #D1BA13;">
          {{ item.count }}
        </div>
        </div>
      </div>
    </div>

    <transition name="fade" mode="out-in">
                <div class="no-warn-info" v-show="arr.length <= 0">
                    <img :src="wugj">
                    <div>暂无告警</div>
                </div>
            </transition>
  
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  reqAlarmType
} from "@api/apiDatav.js";
import { mapState } from "vuex";

export default {
  data() {
    return {
      wugj: require("@assets/images/datav/wugj.png"),
      count1:"",
      count2:"",
      count3:"",
      count4:"",
      count5:"",
      count6:"",
      count7:"",
      count8:"",
      count9:"",
      count10:"",
      count11:"",
      count12:"",
      arr:[]
    };
  },
  computed: {
    ...mapState(["user","datav","spacesManage"]),
  },
  watch: {
    // 当有实时告警，添加数据
    'datav.infoSent'(val) {
      // console.log(this.datav.msgList);
      this.arr.forEach(item=>{
        if(this.datav.msgList.alarmType==item.alarmType){
            item.count++;
        }
      })
    },
  },
  methods: {
    // drawChart() {
    //   // 指定图表的配置项和数据
    //   let option = {
    //     tooltip: {
    //       trigger: "item",
    //     },
    //     legend: {
    //       top: "center",
    //       //  left: "center",
    //       right: "15%",
    //       orient: "vertical", //图例列表的布局朝向。horizontal||vertical
    //       textStyle: {
    //         color: "#fff",
    //         fontSize: "12",
    //       },
    //     },
    //     series: [
    //       {
    //         // name: "Access From",
    //         type: "pie",
    //         radius: ["50%", "80%"],
    //         center: ["30%", "50%"], //整个饼图在整个父元素中的位置
    //         avoidLabelOverlap: false,
    //         label: {
    //           show: false,
    //           position: "center",
    //         },
    //         // emphasis: {
    //         //   label: {
    //         //     show: true,
    //         //     fontSize: 40,
    //         //     fontWeight: "bold",
    //         //   },
    //         // },
    //         labelLine: {
    //           show: false,
    //         },
    //         data: [
    //           { value: 1048, name: "Search Engine" },
    //           { value: 735, name: "Direct" },
    //           { value: 580, name: "Email" },
    //           { value: 484, name: "Union Ads" },
    //           { value: 300, name: "Video Ads" },
    //         ],
    //       },
    //     ],
    //   };

    //   var chartDom = document.getElementById("main2");
    //   var deviceType = echarts.init(chartDom); // 基于准备好的dom，初始化echarts实例
    //   let listener = function () {
    //     deviceType.resize();
    //   };
    //   window.addEventListener("resize", listener);
    //   option && deviceType.setOption(option); // 使用指定的配置项和数据显示图表。
    // },
    async AlarmType(){
      let res = await reqAlarmType( {
        tenantId: this.user.tenantId,
        orgId: this.spacesManage.organizationInfo.orgId,
        roleName:this.user.roleName,
        userId:this.user.userId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
     this.arr= res.data.row.sort((p1,p2)=>{
      return p2.count-p1.count // 降序排
      })
      // console.log(this.arr);
      // res.data.row.forEach(result=>{
      //   if(result.alarmType==1){
      //     this.count1=result.count
      //   }else  if(result.alarmType==2){
      //     this.count2=result.count
      //   }else  if(result.alarmType==3){
      //     this.count3=result.count
      //   }else  if(result.alarmType==4){
      //     this.count4=result.count
      //   }else  if(result.alarmType==5){
      //     this.count5=result.count
      //   }else  if(result.alarmType==6){
      //     this.count6=result.count
      //   }else  if(result.alarmType==7){
      //     this.count7=result.count
      //   }else  if(result.alarmType==8){
      //     this.count8=result.count
      //   }else  if(result.alarmType==9){
      //     this.count9=result.count
      //   }else  if(result.alarmType==10){
      //     this.count10=result.count
      //   }else  if(result.alarmType==11){
      //     this.count11=result.count
      //   }else  if(result.alarmType==12){
      //     this.count12=result.count
      //   }
      // })

    }
  },
  mounted() {
    // this.drawChart();
  },
  created() { 
    // this.AlarmType()
  },
};
</script>

<style lang='less' scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}



.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}
.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~'@{vh}vh';
}

.top (@px, @attr: top) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.left (@px, @attr: left) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.right (@px, @attr: right) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.container {
  height: 100%;
  width: 100%;
  display: inline-block;
  .fontSize(16);

  .title {
    .height(43);
    width: 54%;
    margin: 0 auto;
    .fontSize(16);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../../../assets/images/datav/head.png") no-repeat;
    background-size: 100% 100%;
    font-weight: 600
  }

  .div_box{
    display: flex;
    width: 100%;
    height: 75%;
    overflow: auto;
    .fontSize(12);
    color: #FFFFFF;
    padding-top: 5px;
    padding-right: 15px;
    box-sizing: border-box;
    >div{
      flex: 1;
      // display: flex;
      // flex-direction: column;

      >div:nth-of-type(1) .div1 span:first-of-type{
        background: url('../../../assets/images/paihang1.png') no-repeat;
        background-size: 100% 100%;
      }
      >div:nth-of-type(2) .div1 span:first-of-type{
        background: url('../../../assets/images/paihang2.png') no-repeat;
        background-size: 100% 100%;
      }
      >div:nth-of-type(3) .div1 span:first-of-type{
        background: url('../../../assets/images/paihang3.png') no-repeat;
        background-size: 100% 100%;
      }
      >div{
      //  height: 16.6%;
       .height(38);
      // height: 30px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding-left: 10px;
       box-sizing: border-box;
       .div1{
        display: flex;
        align-items: center;
        span:first-of-type{
          .width(25);
          .height(22);
          .lineHeight(22);
          display: inline-block;
          background: url('../../../assets/images/paihang4.png') no-repeat;
          background-size: 100% 100%;
          // padding-left: 0.3vw;
          padding-right: 0.3vw;
          text-align: center;
          box-sizing: border-box;
          .marginRight(9);
        }
       }
       .div2{
        span:first-of-type{
          .width(25);
          .height(22);
          .lineHeight(22);
          display: inline-block;
          background: url('../../../assets/images/paihang4.png') no-repeat;
          background-size: 100% 100%;
          // padding-left: 0.3vw;
          padding-right: 0.3vw;
          text-align: center;
          box-sizing: border-box;
          .marginRight(9);
        }
       }  
      }
    }
  }

  .no-warn-info {
        width: 100%;
        height: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        margin-top: 1.5%;
        color: #fff;
        font-size: 0.7vw;

        >img {
            width: 110px;
            height: 110px;
            margin-bottom: 10px;
        }

    }

  // .div_box {
  //   color: #FFFFFF;
  //   width: 100%;
  //   height: 75%;
  //   display: flex;
  //   .fontSize(12);
  //   padding-top: 10px;
  //   // padding: 0 10px;
  //   box-sizing: border-box;

  //   >div:first-of-type{
  //     .marginLeft(20);
  //   }
  //   >div:last-of-type{
  //     .marginLeft(20);
  //     .marginRight(20);
  //   }

  //   >div {
  //     flex: 1;
  //     display: flex;
  //     flex-direction: column;
  //     justify-content: space-around;
     
      

  //     >div {
  //       position: relative;
  //       display: flex;
  //       justify-content: space-between;
  //       align-items: center;
  //       padding-left: 15px;

  //       &::before {
  //         content: "";
  //         position: absolute;
  //         width: 8px !important;
  //         height: 8px !important;
  //         top: 50%;
  //         transform: translateY(-50%);
  //         border-radius: 10px !important;
  //         left: 0px;
  //         background-color: #8777FF;
  //       }
  //     }
  //   }

  //   .lvse{
  //     &::before {
  //         background-color: #4ED395 ;
  //       }
  //   }
  //   .chengse{
  //     &::before {
  //         background-color: #F08027 ;
  //       }
  //   }
  //   .honse{
  //     &::before {
  //         background-color: #FC5853 ;
  //       }
  //   }
  //   .lanse{
  //     &::before {
  //         background-color: #52DDFB ;
  //       }
  //   }
  // }
}
</style>